<template>
	<view>
		<view class="display-a search">
			<icon type="search" size="16" />
			<input type="text" placeholder="请输入商品名称" v-model="name" @input="inputChange" @confirm="confirmChange" placeholder-class="placeholder" />
			<view class="font-weight_bold margin-left_10rpx" @click="search()">搜索</view>
		</view>
		
		<view class="display">
			<view class="left" :style="{height:windowHeight+'rpx'}">
				<block v-for="(item,index) in cateList" :key="index">
					<view @click="selLeft(index,item.id)" :class="leftIndex == item.id ? 'sel-left' : 'no-sel-left'">{{item.name}}</view>
				</block>
			</view>
			<view class="right">
				<block v-if="list.length > 0">
					<view class="display-fw-js padding_0_30rpx">
						<block v-for="(item,index) in list" :key="index">
							<view @click="detail(item.id)" class="margin-bottom_20rpx">
								<view class="frame display-a-jc">
									<image v-if="Number(item.inventory) < 1" class="index-54" :src="imgUrl+'index/54.png'"></image>
									<image class="shop-img" :src="item.pic_url"></image>
								</view>
								<view class="version">
									<view class="shop-name font-overflow2">{{item.name}}</view>
									<view class="color_12CDC2">
										<span class="font-size_32rpx font-weight_bold">
											<block v-if="item.pay_type == 1">{{item.integral}}</block>
											<block v-if="item.pay_type == 2">￥{{item.money}}{{'+'+item.integral}}</block>
											<block v-if="item.pay_type == 3">￥{{item.money}}</block>
										</span>
										<span class="font-size_24rpx">
											<block v-if="item.pay_type != 3">{{' '+system.recycle}}</block>
										</span>
									</view>
									<view class="color_757575">
										<view class="font-size_24rpx padding_10rpx_0">市场价￥{{item.price}}</view>
										<view class="font-size_24rpx">库存 {{item.inventory}}</view>
									</view>
								</view>
							</view>
						</block>
					</view>
				</block>
				<mescroll-empty v-else></mescroll-empty>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
				imgUrl: this.$imgUrl,
				
				system: uni.getStorageSync("system"),
				
				name: '',
				
				cateList: [],
				leftIndex: '',
				
				list: [],
				
				windowHeight: '',
			}
		},
		
		onLoad(options) {
			
			if (options.cid){
				this.leftIndex = options.cid;
			}
			
			uni.getSystemInfo({
			    success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 122;
			    }
			});
		},
		
		onShow() {
			this.getCate();
			this.getShopList();
		},
		
		methods: {
			
			// 输入事件
			inputChange(e) {
				this.name = e.detail.value;
				this.getShopList();
			},
			confirmChange(e) {
				this.name = e.detail.value;
				this.getShopList();
			},
			search() {
				this.getShopList();
			},
			
			detail(id) {
				uni.navigateTo({
					url: '/wjyk_recycle/pages/index/my/integral/detail?id='+id+'&type=2'
				})
			},
			
			selLeft(index,id) {
				this.leftIndex = id;
				this.getShopList();
			},
			
			//商品分类
			async getCate() {
				const result = await this.$http.post({
					url: this.$api.goodsCateList,
					data: {
						page: 1,
						psize: 100
					}
				});
				if (result.errno == 0) {
					if (result.data.list.length > 0){
						let arrObj = {
							id: '',
							pic_url: this.imgUrl + 'index/58.png',
							name: '全部'
						}
						result.data.list.unshift(arrObj);
						this.cateList = result.data.list;
					}
				}
			},
			
			//热门商品
			async getShopList() {
				const result = await this.$http.post({
					url: this.$api.goodsList,
					data: {
						category_id: this.leftIndex,
						name: this.name,
						is_recommend: '',
						page: 1,
						psize: 100
					}
				});
				if (result.errno == 0) {
					this.list = result.data.list;
				}
			},
			
		}
	}
</script>

<style lang="scss">
	
	.shop-name {
		height: 80rpx;
		margin-bottom: 8rpx;
		font-size: 32rpx;
	}
	
	.shop-img {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
	}
	
	.version {
		width: 240rpx;
	}
	
	.index-54 {
		width: 138rpx;
		height: 138rpx;
		position: absolute;
		z-index: 99;
		// left: 93rpx;
		// top: 93rpx;
	}
	
	.frame {
		width: 240rpx;
		height: 240rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		position: relative;
	}

	.right {
		width: 580rpx;
		padding: 20rpx 0 10rpx;
	}
	
	.no-sel-left {
		text-align: center;
		padding: 26rpx 10rpx;
		color: #757575;
	}
	
	.sel-left {
		background-color: #36BFC5;
		text-align: center;
		padding: 30rpx 10rpx;
		color: #FFFFFF;
	}
	
	.left {
		width: 170rpx;
		background-color: #f7f7f7;
	}
	
	page {
		background-color: #FFFFFF;
		padding-top: 20rpx;
	}
	
	.search {
		width: 700rpx;
		background-color: #F7F7F7;
		padding: 16rpx 20rpx;
		border-radius: 100rpx;
		margin: 0 25rpx 20rpx;
		>input {
			width: 520rpx;
			height: 48rpx;
			margin-left: 20rpx;
		}
	}
	
</style>
